<template>
  <!-- 默认插槽 -->
  <!-- <div>
    <Child>
      <template>
        <button>默认插槽</button>
      </template>
      <template v-slot:aa>
        <button>具名插槽</button>
      </template>
    </Child>
  </div> -->

  <div>
    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <List :todos="todos">
      <template v-slot:todo="{ todo }">
        <span :style="{ color: todo.isComplete && 'hotpink' }">{{
          todo.text
        }}</span>
      </template>
    </List>
    <hr />

    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>
    <List :todos="todos">
      <template v-slot:todo="{ todo, index }">
        <span :style="{ color: index % 2 === 0 ? 'blue' : 'yellow' }"
          >{{ index }}{{ todo.text }}</span
        >
      </template>
    </List>
  </div>
</template>

<script type="text/ecmascript-6">
import List from "./List";
import Child from "./Child.vue";
export default {
  name: "ScopeSlotTest",
  data() {
    return {
      todos: [
        { id: 1, text: "AAA", isComplete: false },
        { id: 2, text: "BBB", isComplete: true },
        { id: 3, text: "CCC", isComplete: false },
        { id: 4, text: "DDD", isComplete: false },
      ],
    };
  },

  components: {
    List,
    Child,
  },
};
</script>
